

<script setup lang="ts">
import { ref, onMounted, reactive, nextTick } from "vue";
import LingXianTiao from "@/components/LingXianTiao.vue";
import request from '@/utils/request'
import { ElMessage } from 'element-plus'




const StatusList = reactive([
  {
    name: '状态 Status',
    status: 1
  },
  {
    name: '控制 Cantrol',
    status: 2
  }
]) // 状态列表
const actIndex = ref(0)
const actIndex2 = ref(0)
const openIndex = (index: number) => {
  actIndex.value = index
}
const openIndex2 = (index: number) => {
  actIndex2.value = index
}
// 运行告警 数组框
const gaoJinList = reactive([
  {
    name: '运行警告',
    minName: 'Alarm'
  },
  {
    name: '投运状态',
    minName: 'Alarm'
  },
  {
    name: '实时能耗',
    minName: 'Electrical Quantities'
  },
  {
    name: '负荷优先级',
    minName: 'Priority'
  }
]) // 状态列表
const gaoJinIndex = ref(0)
const clickEvent = (index: number) => {
  gaoJinIndex.value = index
}


// let dayList = reactive([])
const dayList = ref([])
// const dayList = reactive([
//   {
//     icon: '../../src/assets/danxiantu_su_cai/qizi.png',
//     iconName: "Uptime",
//     title: "设备投运时长",
//     value: "1600",
//     unit: "天"
//   },
//   {
//     icon: '../../src/assets/danxiantu_su_cai/last.png',
//     iconName: "Last XF",
//     title: "据上一次动作时间",
//     value: "14",
//     unit: "天"
//   },
//   {
//     icon: '../../src/assets/danxiantu_su_cai/lastsrar.png',
//     iconName: "Last E Shart",
//     title: "距上一次油机启动时间",
//     value: "14",
//     unit: "天"
//   },
//   {
//     icon: '../../src/assets/danxiantu_su_cai/alarm.png',
//     iconName: "Alarm",
//     title: "区域告警数量",
//     value: "14",
//     unit: "条"
//   }
// ]) // 状态列表
// 获取运行时长等数据
const getShebei = async () => {
  try {
    const data = await request.get('/psd/getShebei')
    dayList.value = data.data
    // ElMessage.success('请求成功')
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '请求失败')
  } finally {
  }
}
// 向ue发送消息 
const sendUe = () => {
  window.ue5("callbackTest", JSON.stringify([{ name: "杨涛" }, { name: "张三" }]))
  // window.ue5("callbackTest","我是vue传过来的值")
}



const testName = ref("")
const testName1 = ref("")
// 
// 网页接受UE消息
ue.interface.ueSendWeb = (data: any) => {
  const { Command, Args, } = JSON.parse(data);
  testName.value = Args
}
// 网页接受UE消息
ue.interface.ueSendWeb_2 = (data: any) => {
  const { Command, Args, } = JSON.parse(data);
  testName.value = Args
}

// 网页接受UE消息
const isFanXuan = ref(true)
ue.interface.textMax = (data: any) => {
  isFanXuan.value = !isFanXuan.value
  const { Command, Args, } = JSON.parse(data);
  // testName1.value = `${isFanXuan.value}${Args}`
  testName1.value = Args
}

const minText = ref('')

ue.interface.minButton = (data: any) => {
  const { Command, Args, } = JSON.parse(data);
  minText.value = Args
}



// 开关按钮
const valueswitch = ref(true)
const valueswitch_2 = ref(true)


// 状态颜色
//buttArr只能是两个长度，不然会导致按钮颜色不生效

const xianList = ref([])

// 获取运行时长等数据
const getXianList = async () => {
  try {
    const data = await request.get('/psd/switchgears')
    xianList.value = data.data.data
    // ElMessage.success('请求成功')
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '请求失败')
  } finally {
  }
}

// 右上角电线参数
const rightData = ref([])
const getRightData = async () => {
  try {
    const data = await request.get('/psd/getRightData')
    console.log(data)
    rightData.value = data.data
    // ElMessage.success('请求成功')
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '请求失败')
  } finally {
  }
}

// 运行告警 数组框
const xietiList = reactive([
  {
    name: '通讯路由示意',
    minName: 'COMM Routing',
    isType:false
  },
  {
    name: '电气路由示意',
    minName: 'ELEC. Routing',
    isType:true
  }
]) 
onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成
  await getShebei()
  await getXianList()
  await getRightData()
});


</script>

<template>
  <FitScreen :width="1920" :height="1080" mode="fit">
    <div class="maxBox">
      <div class="maxBox-top">
        <div class="maxBox-top-left">
          <div class="maxBox-top-left-top">
            <div class="top-item" @click="openIndex(index)" :class="actIndex == index ? 'activeLeftTop' : ''"
              v-for="(item, index) in StatusList" :key="index">{{ item.name }}</div>
          </div>
          <div class="maxBox-top-left-bottom">
            <div class="bottom-item" v-for="(item, index) in dayList" :key="index">
              <div class="bottom-item-left">
                <div>
                  <img :src="item.icon" alt="">
                </div>
                <div>{{ item.iconName }}</div>
              </div>
              <div class="bottom-item-right">
                <div>{{ item.title }}</div>
                <div class="name">{{ item.value }} <span class="unit">{{ item.unit }}</span> </div>
              </div>
            </div>
          </div>
          <div></div>
        </div>
        <div class="maxBox-top-right">
          <div class="maxBox-top-right-left">
            <div class="topBox">
              <div class="topBox-item" :class="gaoJinIndex == index ? 'activeLeftRight' : ''"
                v-for="(item, index) in gaoJinList" :key="index" @click="clickEvent(index)">
                <div class="topBox-title">{{ item.name }}</div>
                <div class="topBox-bottom">{{ item.minName }}</div>
              </div>
            </div>
            <div class="bomBox">
              <div class="parallelogram" :class="item.isType ? 'youmin1' : 'youmin05'" v-for="(item,index) in xietiList" :key="index">
                <div>{{ item.name }}</div>
                <div>{{ item.minName }}</div>
              </div>
            </div>
          </div>
          <div class="maxBox-top-right-right">
            <div class="right-top">
              <div class="right-top-top">
                <div class="switch">
                  <el-switch v-model="valueswitch" class="ml-2" width="60" size="default"
                    style="zoom: 1.8;--el-switch-on-color: #8b8b8b; --el-switch-off-color: #ff4949" inline-prompt
                    active-text="ANSI" inactive-text="ANSI" />
                </div>
                <div class="red-box">
                  <div class="red-box-1">
                    <div>常用电源正常</div>
                    <div>Power N OK</div>
                  </div>
                  <div class="red-box-1">
                    <div>备用电源正常</div>
                    <div>Power E OK</div>
                  </div>
                </div>
              </div>
              <div class="right-top-bom">
                <LingXianTiao />
              </div>
            </div>
            <div class="right-bom">
              <div class="right-bom-left">
                <div class="right-bom-left-left">
                  <div class="left-icon"></div>
                  <div class="left-text">
                    <div>引自10kV<br>电信Ⅰ线</div>
                  </div>
                </div>
                <div class="right-bom-left-right">
                  <div class="right-text" v-for="(item,index) in rightData" :key="index">
                    <div class="right-text-1">{{ item.title }}</div>
                    <div class="right-text-2">{{ item.name }}</div>
                    <div class="right-text-3">{{ item.value }}</div>
                  </div>
                </div>
              </div>
              <div class="right-bom-left">
                <div class="right-bom-left-left">
                  <div class="right-icon"></div>
                  <div class="left-text">
                    <div>引自油机配电系统 1#出线柜<br></div>
                  </div>
                </div>
                <div class="right-bom-left-right">
                  <div class="right-text">
                    <div class="right-text-1">市电耗能</div>
                    <div class="right-text-2">Power N Con.</div>
                    <div class="right-text-3">1600000 kWh</div>
                  </div>
                  <div class="right-text">
                    <div class="right-text-1">市电当前功率</div>
                    <div class="right-text-2">Power N Output</div>
                    <div class="right-text-3">16000 kW</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="maxBox-bottom">
        <div class="maxBox-bottom-left">
          <div class="maxBox-top-right-right">
            <div class="right-top">
              <div class="right-top-top">
                <div class="switch">
                  <el-switch v-model="valueswitch_2" class="ml-2" width="60" size="default"
                    style="zoom: 1.8;--el-switch-on-color: #8b8b8b; --el-switch-off-color: #ff4949" inline-prompt
                    active-text="ANSI" inactive-text="ANSI" />
                </div>
                <div class="red-box">
                  <div class="red-box-1">
                    <div>常用电源正常</div>
                    <div>Power N OK</div>
                  </div>
                  <div class="red-box-1 youmin02" style="background-color: #67a625;">
                    <div>备用电源异常</div>
                    <div>Power E OK</div>
                  </div>
                </div>
              </div>
              <div class="right-top-bom">
                <LingXianTiao />
              </div>
            </div>
            <div class="right-bom">
              <div class="right-bom-left">
                <div class="right-bom-left-left">
                  <div class="left-icon"></div>
                  <div class="left-text">
                    <div>引自10kV<br>电信Ⅰ线</div>
                  </div>
                </div>
                <div class="right-bom-left-right">
                  <div class="right-text">
                    <div class="right-text-1">市电耗能</div>
                    <div class="right-text-2">Power N Con.</div>
                    <div class="right-text-3">1600000 kWh</div>
                  </div>
                  <div class="right-text">
                    <div class="right-text-1">市电当前功率</div>
                    <div class="right-text-2">Power N Output</div>
                    <div class="right-text-3">16000 kW</div>
                  </div>
                </div>
              </div>
              <div class="right-bom-left">
                <div class="right-bom-left-left">
                  <div class="right-icon"></div>
                  <div class="left-text">
                    <div>引自油机配电系统 1#出线柜<br></div>
                  </div>
                </div>
                <div class="right-bom-left-right">
                  <div class="right-text">
                    <div class="right-text-1">市电耗能</div>
                    <div class="right-text-2">Power N Con.</div>
                    <div class="right-text-3">1600000 kWh</div>
                  </div>
                  <div class="right-text">
                    <div class="right-text-1">市电当前功率</div>
                    <div class="right-text-2">Power N Output</div>
                    <div class="right-text-3">16000 kW</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="maxBox-bottom-right">
          <!-- <div class="ue-text">ueSendWeb_2事件：{{ testName}}</div>
        <div class="ue-text">textMax事件：{{ testName1}}</div>
        <div class="ue-text">minButton事件：{{ minText}}</div> -->
          <div class="maxBox-top-left">
            <div class="maxBox-top-left-top">
              <div class="top-item" @click="openIndex2(index)" :class="actIndex2 == index ? 'activeLeftTop' : ''"
                v-for="(item, index) in StatusList" :key="index">{{ item.name }}</div>
            </div>
            <div class="maxBox-top-left-bottom">
              <div class="shItem" v-for="(item, index) in xianList" :key="index">
                <div class="shItem-left">{{ item.title1 }}<br>{{ item.title2 }}</div>
                <div class="shItem-right">
                  <div class="shItem-right-1" :class="it.isType ? 'youmin1' : 'youmin05'"
                    v-for="(it, idx) in item.buttArr" :key="idx">
                    <div class="shItem-right-1-text">{{ it.china }}</div>
                    <div class="shItem-right-1-box">{{ it.english }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </FitScreen>
</template>

<style lang='scss' scoped>
@use "index";
</style>
